<script setup lang="ts">
import { Moon, Sunny, UserFilled } from '@element-plus/icons-vue'
import { useLayoutConfigStore } from '@/store/layoutConfig'
import { useFullscreen, useDark } from "@vueuse/core"

const router = useRouter()

let userName = ref<string>('admin')

/**
 * 切换全屏
 */
const layoutConfig = useLayoutConfigStore()
let { isFullscreen, toggle: toggleFullscreen } = useFullscreen()
async function handleToggleFullscreen() {
  await toggleFullscreen()
  layoutConfig.isFullscreen = isFullscreen.value
}

const isDark = useDark({
  valueDark: 'dark', // 暗黑模式
  valueLight: '', // 高亮时，在html元素的class属性值
  initialValue: 'dark', // 初始模式
})
// console.log('isdark', isDark);

function changeDark(val: any) {
  layoutConfig.isDrak = val;
}

</script>

<template>
  <div class="layout-header-user">
    <!-- 全屏 -->
    <div class="layout-header-user-icon" @click="handleToggleFullscreen">
      <i-ep-full-screen />
    </div>
    <div class="layout-header-user-icon">
      <el-switch v-model="isDark" @change="changeDark" inline-prompt :active-action-icon="Moon"
        :inactive-action-icon="Sunny"
        style="--el-switch-on-color: #2c2c2c; --el-switch-off-color: #dcdfe6;--el-switch-border-color: #7c7d81" />
    </div>
    <div class="layout-header-user-icon ml2">
      <el-dropdown>
        <span class="user-dropdown-link">
          <!--:src="url"-->
          <el-avatar :size="27" :icon="UserFilled" />
          <span style="color: var(--hs-color-username);">{{ userName }}</span>
          <i-ep-arrow-down />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="router.push('/')">首页</el-dropdown-item>
            <el-dropdown-item @click="router.push('/401')">401</el-dropdown-item>
            <el-dropdown-item @click="router.push('/404')">404</el-dropdown-item>
            <el-dropdown-item @click="router.push('/')" divided>退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>